<template>
  <CommonPanel title="过车辆趋势">
    <template #opt>
      <div>
        <CustomBtn v-for="(i, v) in btnList" :key="v" @click="customActive(v)" :active="v === index ? true : false"> {{
          i.name
        }}</CustomBtn>
      </div>
    </template>
    <div class="content-box1">
      <CommonChart :option="option" />
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from 'echarts';
import { computed, onMounted, ref, watch } from "vue";
import { defineEmits,defineProps } from "vue";
const emits = defineEmits(["childEvent"]);
const props = defineProps({
  data: Object
});

let times =ref([])
let chartData =ref([])
const btnList = ref([
{
    name: "今日",
  },
  {
    name: "近一周",
  },
  {
    name: "近一月",
  },
]);
const index = ref(0)
function customActive(v) {
  index.value = v;
  // 设置时间
  emits('childEvent', v);
}
watch(() => props.data, (newData) => {
      if (newData) {
        times.value = newData?.map((item)=>{
          return item?.times
        })
        chartData.value =newData?.map((item)=>{
          return item?.number
        })
      }
    });
let option = computed(() => {
  return {
       grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(50, 216, 205, 1)'
        },
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: 1,
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#A1A7B3'
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },

      data: times.value
    }],
    yAxis: [{
      type: 'value',
      name: '',
      padding: 5,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#A1A7B3',
          type: 'dashed'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: 10,
        textStyle: {
          color: '#A1A7B3'

        }
      },
      axisTick: {
        show: false
      }
    },

    ],
    series: [
      {
        name: '今日',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: '#23D0C4',
            lineStyle: {
              color: "#23D0C4",
              width: 2
            },
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(50, 216, 205, 1)'
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0.2)'
              }
            ], false),
          }
        },
        data: chartData.value
      },

    ]
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;

  &>div {
    flex: 1;
    width: 0px;
  }

  .legend-box {
    margin: auto 0px;
    padding-left: 32px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>

